<template>
    <el-dialog title="组织架构" v-model="openOrg" width="1190px" append-to-body style="margin-top: 90px!important;">
        <div class="dialog-top-line"></div>
        <!--<div style="display: flex; padding: 10px;">
            <div style="margin-right: 10px"><el-switch v-model="horizontal"></el-switch> 横向</div>
            <div style="margin-right: 10px"><el-switch v-model="collapsable"></el-switch> 可收起</div>
        </div>
        <div>
            背景色：<el-color-picker v-model="style.background" size="small"></el-color-picker>&nbsp;
            文字颜色：<el-color-picker v-model="style.color" size="small"></el-color-picker>&nbsp;
        </div>-->
        <div class="tree-container">
            <vue3-tree-org
                :data="orgAllList"
                center
                :horizontal="horizontal"
                :collapsable="collapsable"
                :label-style="style"
                :only-one-node="onlyOneNode"
                :clone-node-drag="cloneNodeDrag"
                :before-drag-end="beforeDragEnd"
                @on-node-drag="nodeDragMove"
                @on-node-drag-end="nodeDragEnd"
                @on-contextmenu="onMenus"
                @on-expand="onExpand"
                @on-expand-all="onExpandAll"
                @on-node-dblclick="onNodeDblclick"
                @on-node-click="onNodeClick"
            />
        </div>
        <div class="dialog-bottom-line"></div>
        <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelOrg">取 消</el-button>
        </div>
        </template>
    </el-dialog>
  </template>
<script setup>
import { listOrg } from "@/api/partybuilding/Org";
const { proxy } = getCurrentInstance();
const openOrg = ref(false);
const orgAllList = ref([]);

const horizontal=ref(false);
const collapsable=ref(false);
const onlyOneNode=ref(false);
const cloneNodeDrag=ref(false);
const disaled=ref(false);
const style=ref({background:"#108ffe",color:"#fff",marginTop:"4px"});
const onMenus= (node, command) => {};
const onExpand= (e, data) => {
    console.log("onExpand", e, data);
};
const onExpandAll= (b) => {
    if (b) {    
        collapsable.value = false;
    } else {
        collapsable.value = true;
    }
};
const nodeDragMove= (data) => {};
const beforeDragEnd= (node, targetNode) => {
    return new Promise((resolve, reject) => {
        if (!targetNode) reject()
        if (node.id === targetNode.id) {
            reject()
        } else {
            resolve()
        }
    })
};
const nodeDragEnd= (data, isSelf) => {};
const onNodeDblclick= () => {};
const onNodeClick= (e, data) => {};
const expandChange= () => {};
const toggleExpand= (data, val) => {
    if (Array.isArray(data)) {
    data.forEach((item) => {
        item.expand = val
        if (item.children) {
        this.toggleExpand(item.children, val);
        }
    });
    } else {
    data.expand = val
    if (data.children) {
        this.toggleExpand(data.children, val);
    }
    }
};

defineExpose({
    showOrgTree
});

// 显示组织架构
function showOrgTree() {
    orgAllList.value = [];
    listOrg().then(response => {
        let dataList = response.rows;
        dataList.forEach(item => {
            item.label = item.deptName;
        });
        let tmpArray =  proxy.handleTree(dataList, "deptId");
        if (tmpArray!=null && tmpArray.length > 0) {
            orgAllList.value = tmpArray[0];
        }
        openOrg.value = true;
    });
}

// 关闭查看组织架构
function cancelOrg() {
  openOrg.value = false;
}
</script>
<style>
.el-dialog {
    transform: none;
    left: 0;
    position: relative;
    margin: 0 auto;
    top: 9px!important;
}
.tree-container {
    width: 100%; /* 设置父div的宽度 */
    height: 700px; /* 设置父div的高度，可以根据需要自定义 */
}
.tree-container > .vue3-tree-org {
    width: 100%; /* 让组件的宽度自适应父div的宽度 */
    height: 100%; /* 让组件的高度自适应父div的高度 */
}
.dialog-bottom-line {
    width: 100%;
    height: 1px;
    background-color: #ccc;
    position: absolute;
    left: 0px;
    bottom: 60px;
}
</style>